<template>
  <nav class="h-full" :class="[navStyle, pageStyle]">
    <div class="wrapper h-full flex justify-between px-2">
      <div v-if="menuVisible" class="h-full flex items-center">
        <layouts-admin-menu />
      </div>
      <div v-else class="h-full">
        <!-- 菜单折叠 -->
        <div
          class="h-full inline-flex justify-center items-center text-[22px] px-3 cursor-pointer"
          @click="toggleCollapsed"
        >
          <a-icon :type="menus.collapsed ? 'menu-unfold' : 'menu-fold'" />
        </div>
        <!-- 面包屑导航 -->
        <div
          class="h-full inline-flex justify-center items-center text-lg px-3 cursor-pointer"
        >
          <layouts-admin-breadcrumb />
        </div>
      </div>
      <!-- 右边菜单 -->
      <div class="h-full">
        <a-dropdown :trigger="['click']">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span>字体大小</span>
            </template>
            <div
              class="h-full inline-flex justify-center items-center text-[22px] px-3 cursor-pointer"
            >
              <a-icon type="font-size" />
            </div>
          </a-tooltip>

          <a-menu
            slot="overlay"
            :selected-keys="[navs.layoutSize]"
            @click="toggleFontSize"
          >
            <a-menu-item :key="LAYOUT_SIZE.default">
              <a>{{ LAYOUT_SIZE.default }}</a>
            </a-menu-item>
            <a-menu-item :key="LAYOUT_SIZE.middle">
              <a>{{ LAYOUT_SIZE.middle }}</a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item :key="LAYOUT_SIZE.small">
              {{ LAYOUT_SIZE.small }}
            </a-menu-item>
          </a-menu>
        </a-dropdown>

        <div
          class="h-full inline-flex justify-center items-center text-[22px] px-3 cursor-pointer"
          @click="toggleFullscreen"
        >
          <a-icon :type="navs.fullscreen ? 'fullscreen-exit' : 'fullscreen'" />
        </div>

        <layouts-admin-user-info></layouts-admin-user-info>
      </div>
    </div>
  </nav>
</template>

<script>
import { LAYOUT_SIZE } from '@/constants'
export default {
  data() {
    return {
      LAYOUT_SIZE,
    }
  },
  computed: {
    menus() {
      return this.$store.state.admin.menus
    },
    navs() {
      return this.$store.state.admin.navs
    },
    navStyle() {
      return this.$store.state.admin.navStyle
    },
    pageStyle() {
      return this.$store.state.admin.pageStyle
    },
    menuVisible() {
      return this.navStyle === 'top'
    },
  },
  methods: {
    toggleCollapsed() {
      this.$store.commit('admin/SET_MENUS_COLLAPSED', !this.menus.collapsed)
    },
    toggleFullscreen() {
      this.$store.commit('admin/SET_NAVS_FULLSCREEN', !this.navs.fullscreen)
    },
    toggleFontSize(info) {
      this.$store.commit('admin/SET_NAVS_LAYPOUTS_SIZE', info.key)
    },
  },
}
</script>

<style lang="scss" scoped>
nav {
  background-color: #001529;
  color: rgba(255, 255, 255, 0.65);
  transition: background 0.3s;
  &.top {
    .wrapper {
      max-width: 1240px;
      margin: 0 auto;
    }
  }
  &.white {
    background-color: white;
    color: rgba(0, 0, 0, 0.65);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
  }
}
</style>
